<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>插入和替换元素操作</title>
        <!-- 插入和替换元素操作：针对元素增删改操作
         append()         功能：在匹配元素集合中所有元素的内部末尾插入内容
         prepend()        功能：在匹配元素集合中所有元素的内部开头插入内容
         
         after()          功能：在匹配元素集合中所有元素的外部后面插入内容
         before()         功能：在匹配元素集合中所有元素的外部前面插入内容
         
         remove()         功能：移除匹配元素集合中所有的元素和子元素【盒子模型都删掉】
         empty()			功能：清空匹配元素集合中所有的元素的内容【盒子模型不删掉】
         
         replaceWith()
         -->
    <style>
        button{
            margin: 5px;
            padding: 10px 15px;
            cursor: pointer;
        }
        body{
            margin: 20px;
        }
        #target{
            border: 1px solid red;
            padding: 10px;
            margin-top: 10px;
            margin-left: 5px;
            border-radius:5px ;
        }
		.boss{
			        "width":"300px",
					"height":"300px",
					"background-color":"#ff0",
					"border-radius":"50%",
					"background-image":"url(../img/11.gif)",
					"background-size":"100%,100%",
					"color":"transparent",
					"display":"block"
		}
    </style>
    <script src="../js/jquery-1.11.1.js"></script>
    </head>
    <body>
                 <button id="appendBtn">内部末尾插入元素</button>
                 <button id="prependBtn">内部开头插入元素</button>
                 <button id="afterBtn">外部后面插入元素</button>
                 <button id="beforeBtn">外部前面插入元素</button>
                 <button id="removeBtn">删除元素</button>
                 <button id="emptyBtn">清空元素</button>
                 <button id="btn"></button>
                 <!-- 目标显示区域-->
                 <div id="target">
                     <p>目标元素的初始段落</p>
                     </div>
                     <!-- 用于插入跟替换的区域-->
                 <div id="newElement" style="display: none;">
                     <p>插入新元素的初始段落</p>
                     </div>
    
<script>
    /* 1.点击   内部末尾插入元素  按钮  p文本后面追加新元素中包含内容操作 */
    $("#appendBtn").click(function(){
        //效果：点击按钮 追加“新元素--自带内容”
        //1.1 追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
    var cpe=$("#newElement").clone();
    //clone()创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
    //1.2 自带属性和属性值：隐藏--改成显示
    cpe.css("display","block");
    //1.3将复制出来的新元素，追加给当前元素上
    $("#target").append(cpe);
    });
    /* 2.点击   内部开头插入元素  按钮  p文本前面追加新元素中包含内容操作 */
    $("#prependBtn").click(function(){
   var ppb=$("#newElement").clone();
    ppb.css("display","block");
    $("#target").prepend(ppb);
    });
    /* 3.点击   外部末尾插入元素  按钮  p文本后面追加新元素中包含内容操作 */
    $("#afterBtn").click(function(){
        var ne=$("#newElement").clone();
	
        ne.addClass("boss");
        $("#target").after(ne);
    });
    /* 4.点击   外部前面插入元素  按钮  生成 圆形，保留背景色，文本不需要，
                                       背景图300*300*/
	$("#beforeBtn").click(function(){
		//效果：点击按钮 追加"新元素---自带内容"
		//1.1追加内容是新元素----克隆---html结构全部复制出来，元素包含属性
	var cpe=$("#newElement").clone();
	//clone()创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
	//1.2自带属性和属性值：隐藏--改成显示
	cpe.css({"width":"300px",
			"height":"300px",
			"background-color":"#ff0",
			"border-radius":"50%",
			"background-image":"url(../img/11.gif)",
			"background-size":"100%,100%",
			"color":"transparent",
			"display":"block"
	
	});

	//1.3 将复制出来的新元素，追加给当前元素上
	 $("#target").before(cpe);
	 });	 
	/* 5.点击 删除元素  按钮  页面上所有元素包括子元素全部删除【盒子模型】 */
	$("#removeBtn").click(function(){
		$("#target").remove();
	});
	/* 6.点击  清空元素 按钮   页面上所有元素中内容全部删除【盒子模型不删】 */
	$("#emptyBtn").click(function(){
		$("#target").empty();
	});
	/* 7.点击 替换元素 按钮  页面上目标元素替换为新元素*/
		   $("#replaceBtn").click(function(){
			   //克隆 新元素 #newElement【父子级】
			  var c=$("#newElement").clone().css("display","block");
			   //替换 找到 目标元素  替换 新元素 
			   $("#target").replaceWith(c);
		   });
</script>
</body>
</html>